<template>
    <div class="comment-detail">
        <el-descriptions :column="1" border size="default" v-loading="loading">
            <el-descriptions-item
                v-for="(item, index) in baseConfig"
                :key="index + 'baseConfig'" 
                :label="item.name"
                label-class-name="base-content-label"
                class-name="base-content-content">
                <template v-if="item.field === 'parent_com'">
                    <span class="one-line table-link" @click="openCommentDetail(basicInfo.parent_comment.comment_id)">{{ basicInfo[item.field] || '-' }}</span>
                </template>
                <template v-else-if="item.field === 'nickname'">
                    <span class="one-line table-link" @click="openUserDetail(basicInfo.user_tab.user_id)">{{ basicInfo[item.field] || '-' }}</span>
                </template>
                <template v-else>{{ basicInfo[item.field] || '-' }}</template>
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <el-dialog
        v-if="dialogComment"
        v-model="dialogComment" 
        title="评论详情" 
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="log-dialog"
        @before-close="closeCommentDetail">
        <commentDetails :id="currentCommentId"></commentDetails>
    </el-dialog>
    <!-- 用户详情 -->
    <el-dialog
        v-if="dialogUser"
        v-model="dialogUser" 
        title="用户详情" 
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="log-dialog"
        @before-close="closeUserDetail">
        <userDetails :id="currentUserId || ''"></userDetails>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue'
import commentDetails from './commentDetails.vue'
import userDetails from '@/pages/user-manage/components/userDetails.vue'
import { getCommentDetailById } from '../../../api/comment'
const props = defineProps({
    id: {
        type: [Number, String],
        default: ''
    }
})

let loading = ref(false)

let currentCommentId = ref('')
let dialogComment = ref(false)

let currentUserId = ref('')
let dialogUser = ref(false)

let baseConfig = reactive([
    { name: '评论内容', field: 'content' },
    { name: '发布人', field: 'nickname' },
    { name: '发布时间', field: 'create_time' },
    { name: '回复评论', field: 'parent_com' }
])

let basicInfo:any = ref({})
//@ts-ignore
watch(() => props.id, async(val: [Number, String]) => {
    if (val) {
        // 调获取详情接口
        const result = await getCommentDetailById({   
            comment_id:val
        })
        result.data.nickname = result.data.user_tab.nickname
        result.data.parent_com = result.data.parent_comment.content
        basicInfo.value = result.data
    }
}, {
    immediate: true,
    deep: true
})

// 打开评论详情
const openCommentDetail = (id: Number) => {
    //@ts-ignore
    currentCommentId.value = id
    dialogComment.value = true
}
// 关闭评论详情
const closeCommentDetail = () => {
    currentCommentId.value = ''
    dialogComment.value = false
}
// 打开用户详情 
const openUserDetail = (id: Number) => {
    //@ts-ignore
    currentUserId.value = id
    dialogUser.value = true
}
// 关闭用户详情
const closeUserDetail = () => {
    currentUserId.value = ''
    dialogUser.value = false
}
</script>

<style lang="less" scoped>
// less中使用 ::v-deep 深度选择器更改element-ui组件的样式
// scss中vue3使用:deep(.class)  vue2使用/deep/ .class
::v-deep .base-content-label {
    width: 100px;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #63686F;
    background: #FAFAFA;
}
::v-deep .base-content-content {
    font-size: 12px !important;
    color: #63686F !important;
    min-width: 150px;
    word-break: break-all;
}
.comment-detail {
    padding: 16px;
}
</style>